<template>
	<el-container style="height: 550px; border: 1px solid #eee">
		<el-container>
			<el-main>
				<span>
					<b>Select Report:</b>
					<el-select size="small" v-model="this.report.selectedReport" value-key="value" @change="changeReport">
						<el-option v-for="item in this.report.reportList" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					<!--Notes:If latest reports are not visible,please click right button and 'refresh frame' to force reload.-->
				</span>
				<iframe
					name="iframeMap"
					id="iframeMapViewComponent"
					width="100%"
					height="100%"
					:src="this.report.reportUrl"
					frameborder="0"
					scrolling="yes"
					ref="iframeDom"
				></iframe>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
import { ElMessage } from 'element-plus';
import reportApi from '/@/api/cloudtest/report.ts';
import { ref, defineComponent } from 'vue';
import iframeApi from '/@/api/iframe/index.ts';

export default {
	mounted() {
		this.getReport();
	},
	data() {
		return {
			report: {
				reportList: [],
				reportBaseUrl: '',
				reportUrl: '',
				selectedReport: 'default',
			},
		};
	},

	methods: {
		changeReport() {
			let domain = this.report.selectedReport;
			this.report.reportUrl = this.report.reportBaseUrl + domain + '/html/index.html';

			let iframe = document.getElementById('iframeMapViewComponent');
			if (iframe != null) {
				iframe.contentWindow.location.reload(true);
			}
		},
		getReport() {
			let domain = this.report.selectedReport;
			if (domain == '') {
				domain = 'default';
			}

			reportApi
				.getReport()
				.then((response) => {
					if (response.status) {
						this.report = response.data;
						this.report.selectedReport = 'default';
						this.report.reportUrl = this.report.reportBaseUrl + domain + '/html/index.html';

						iframeApi
							.checkUrl(this.report.reportUrl)
							.then((response) => {
								// alert(JSON.stringify(response.status));
								if (response.status == 200) {
								} else {
									this.report.reportUrl = `${import.meta.env.VITE_API_URL}cloudtest/unibeta-gitee/index.html`;
								}
							})
							.catch((exception) => {
								this.report.reportUrl = `${import.meta.env.VITE_API_URL}cloudtest/unibeta-gitee/index.html`;
							});

						let iframe = document.getElementById('iframeMapViewComponent');
						if (iframe != null) {
							iframe.contentWindow.location.reload(true);
						}
					} else {
						ElMessage.error({
							message: 'Operation faild: caused by ' + response.message,
							type: 'error',
						});
					}
				})
				.catch((error) => {
					ElMessage.error({
						message: 'Operation faild: caused by ' + error,
						type: 'error',
					});
				});
		},
	},
};
</script>
